import Vue from "vue";
import App from "./App.vue";

Vue.config.productionTip = false;

const userRole = "banzhuren";

//以下这种方式只能隐藏没有权限的安装,不能删除(删除需要父元素的配合)
// Vue.directive("role", (ele, bindings) => {
//   const isHas = bindings.value.includes(userRole);
//   // console.log(isHas, "isHas");
//   if (!isHas) {
//     // ele.style.display = "none";
//     // ele.remove();
//     console.log(ele.parentNode); //null
//     ele.parentNode.removeChild(ele);
//   }
// });

Vue.directive("role", {
  //组件初始化时调用,不保证父节点存在
  bind() {},
  //当前指令所在的节点已经插入到父节点了
  inserted(ele, bindings) {
    const isHas = bindings.value.includes(userRole);
    // console.log(isHas, "isHas");
    if (!isHas) {
      // ele.style.display = "none";
      ele.remove();
      console.log(ele.parentNode, "ele.parentNode"); //null
      // ele.parentNode.removeChild(ele);
    }
  },
  //当前指令所在的组件发生了更新,但是子组件还没有更新
  update() {},
  //当前指令所在的组件及所有子组件都发生了更新
  componentUpdated() {},
  //当前指令所在的组件被卸载
  unbind() {},
});

new Vue({
  render: (h) => h(App),
}).$mount("#app");
